<script setup>
import { ref, onMounted, inject } from 'vue'

defineProps({
    modelValue: {
        type: Boolean,
        default: true
    },
    name: {
        type: String,
        default: ''
    }
})

const emit = defineEmits(['update:modelValue', 'createConfirm'])


const getQueryItemFn = inject("getQueryItemFn")
const queryItem = ref({})


const items = ref([]) // 存储 swiper_item 的数据
const index = ref(0) // 当前显示的索引
const startX = ref(0) // 记录触摸起始点的 X 坐标
const deltaX = ref(0) // 记录触摸移动的距离

// swiper切换
function swiperItemClick(e) {
    index.value = e
    layout()
}


function touchStart(e) {
    startX.value = e.touches[0].clientX // 记录触摸起始点
}

function touchMove(e) {
    deltaX.value = e.touches[0].clientX - startX.value // 计算移动距离
}

function touchEnd() {
    if (deltaX.value > 50) {
        // 向右滑动
        index.value--
        if (index.value < 0) index.value = 0
    } else if (deltaX.value < -50) {
        // 向左滑动
        index.value++
        if (index.value > items.value.length - 1) {
            index.value = items.value.length - 1
        }
    }
    layout() // 更新布局
    deltaX.value = 0 // 重置移动距离
}


function layout() {
    const offsetStep = 45 // 每个 item 的偏移量
    const scaleStep = 0.8 // 每个 item 的缩放比例
    for (let i = 0; i < items.value.length; i++) {
        const item = items.value[i]
        const dis = i - index.value // 下标距离
        let xOffset = dis * offsetStep // x 轴偏移量
        const sign = Math.sign(dis)
        if (i !== index.value) {
            xOffset = xOffset + 45 * sign
        }

        const scale = scaleStep ** Math.abs(dis) // 缩放比例
        item.style = {
            zIndex: items.value.length - Math.abs(dis),
            transform: `translateX(${xOffset}px) scale(${scale})`,
            filter: i === index.value ? 'none' : 'blur(5rpx) grayscale(50%)', // 添加模糊和灰色蒙版
            opacity: i === index.value ? 1 : 0.5, // 设置透明度

        }
        item.imgPath = queryItem.value.imgPath[i] // 设置图片路径
    }
}

// 初始化 items 数据
const initializeItems = () => {
    items.value = Array.from({ length: queryItem.value?.imgPath.length }, (_, i) => ({
        id: i,
        style: {}, // 每个 item 的样式
    }))
}






function onClose() {
    emit('update:modelValue', false)
}

// 立即生成
function startFn() {
    uni.getImageInfo({
        src: items.value[index.value].imgPath,
        success: function (res) {
            emit('createConfirm', res.path)
        }
    })
}


onMounted(() => {
    queryItem.value = getQueryItemFn()
    if (typeof queryItem.value.imgPath === 'string') {
        queryItem.value.imgPath = queryItem.value.imgPath.split(";")
    }
    initializeItems() // 初始化 items 数据
    layout() // 初始化布局
})

const customStyle = `background-color: var(--a-adapter-bg-color)`
</script>

<template>
    <van-popup :show="modelValue" round="16" position="bottom" closeable @close="onClose" :custom-style="customStyle">
        <div class="selectImagePopup">
            <div class="title">请选择图片</div>
            <div class="swiper" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
                <div class="swiper_item" v-for="item, subIndex in items" @click="swiperItemClick(subIndex)" :key="item.id"
                    :style="item.style">
                    <img :src="item.imgPath" alt="" mode="aspectFit" class="imgSty" />
                </div>
            </div>
            <div class="footer">
                <div class="create_btn" @click="startFn">
                    <div class="create_btn_title">{{ `前往${name}` }}</div>
                </div>
            </div>
        </div>
    </van-popup>
</template>

<style lang='scss' scoped>
.selectImagePopup {
    box-sizing: border-box;
    width: 100%;
    height: 70vh;
    background-color: var(--a-adapter-bg-color);
    padding-top: 30rpx;
    overflow: hidden;

    .title {
        font-size: 32rpx;
        color: var(--a-one-text-color);
        text-align: center;
        font-weight: normal;
    }

    .swiper {
        position: relative;
        height: 792rpx;
        margin-top: 50rpx;

        .swiper_item {
            position: absolute;
            top: 0;
            left: 50%;
            width: 438rpx;
            height: 100%;
            margin-left: -219rpx;
            transition: all 0.5s;
            border-radius: 15rpx;
            background-color: rgba(255, 255, 255, 0.02);

            .imgSty {
                width: 100%;
                height: 100%;
                border-radius: 15rpx;
            }
        }

        .bg-red {
            background-color: red;
        }

        .bg-pink {
            background-color: pink;
        }

        .bg-skyblue {
            background-color: skyblue;
        }

        .bg-greenyellow {
            background-color: greenyellow;
        }

        .bg-springgreen {
            background-color: springgreen;
        }
    }

    .footer {
        margin-top: 50rpx;
        padding: 0 30rpx;

        .create_btn {
            height: 86rpx;
            background: #83CD88;
            border-radius: 44rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .create_btn_title {
                font-size: 32rpx;
                color: #FFFFFF;
            }

            .create_btn_label {
                font-size: 20rpx;
                color: #FFFFFF;
            }
        }
    }
}
</style>